<template>
  <!-- 公共loading组件 -->
  <load :loading="loading" />
  <!-- 主体内容 -->
  <div v-if="loading == false">
    <!-- 公共标题组件 -->
    <Header v-on:closeMenu="closeMenu" :show="showRef" />
    <main id="main">
      <!-- 公共导航组件 -->
      <Menu v-on:showMenuByChild="showMenuByChild" />
      <!-- 主体内容 -->
      <div class="container">
        <!-- 头部 -->
        <header>
          <div class="name-wrapper">
            <div id="fullname" class="title">关 超</div>
            <div id="jobtitle" class="sub-title">全栈工程师</div>
          </div>
          <div id="contact" class="contact">
            <div class="contact-item">邮箱地址：guanchao-gc@foxmail.com</div>
            <!-- 手机号 -->
            <!-- <div class="contact-item">your-phone-num</div> -->
            <div class="contact-item">
              <a href="https://gitee.com/camelliass" target="_blank" rel="noopener">
                码云主页：<span style="color: #0d5570">Gitee</span>
              </a>
            </div>
            <div class="contact-item">
              <a href="https://juejin.cn/user/123613789299837" target="_blank" rel="noopener">
                掘金主页：<span style="color: #0d5570">juejin.cn</span>
              </a>
            </div>
            <div class="contact-item">出生日期：1996-4-8</div>
          </div>
        </header>
        <!-- 技能 -->
        <section id="skills">
          <div class="section-title">技能描述</div>
          <div class="section-content">
            <div class="block">
              <div class="block-title">后端</div>
              <div class="block-content">
                熟练使用 java/php 原生代码，熟练掌握oop面向对象思维编写代码
              </div>
              <div class="block-content">熟练掌握Thinkphp3/5，Yii2，laravel5/8框架</div>
              <!-- <div class="block-content">
                熟练掌握PHP代码审计流程，在开发过程中及部署的时候检查代码漏洞
              </div> -->
              <div class="block-content">
                熟练掌握swoole，集成在laravel框架中，在网站中实现即时聊天功能
              </div>
              <div class="block-content">
                熟练掌握sphinx全文搜索引擎在linux中配置及调用方法，并集成在laravel框架中
              </div>
              <div class="block-content">
                熟练掌握SSM，以及SpringBoot常用java框架
              </div>
              <div class="block-content">
                熟练掌握ElasticSearch全文搜索引擎，并集成在Springboot框架中
              </div>
              <div class="block-content">
                熟练掌握RabbitMQ中间件，并集成在Springboot框架中
              </div>
              <div class="block-content">
                熟练掌握Sentinel限流工具，并集成在Springboot框架中
              </div>
              <div class="block-content">
                熟练掌握webscoket，并集成在Springboot框架中
              </div>
            </div>
            <div class="block">
              <div class="block-title">前端</div>
              <div class="block-content">熟练使用VUE3，VUE2框架搭建并开发项目</div>
              <div class="block-content">熟练掌握微信小程序框架搭建并开发项目</div>
              <div class="block-content">
                熟练掌握HTML、JavaScript、Typescript、jQuery等Web前端开发技术
              </div>
              <div class="block-content">
                熟悉HTML5新属性及cookie、localstorage等本地存储技术
              </div>
              <!-- <div class="block-content">了解CSS基本语法</div> -->
            </div>
            <div class="block">
              <div class="block-title">数据库</div>
              <div class="block-content">
                熟练掌握mysql基本语法，使用sql对数据库进行增删改查
              </div>
              <div class="block-content">
                熟练掌握大数据量数据增删改查的优化方法，包括但不限于：分析慢sql语句添加索引及分表等
              </div>
              <div class="block-content">
                熟练掌握视图、存储过程、触发器、索引、event定时事件等
              </div>
              <div class="block-content">
                熟练掌握redis 非关系型数据库(NoSQL)的使用
              </div>
            </div>
            <div class="block">
              <div class="block-title">Linux</div>
              <div class="block-content">
                熟练掌握docker使用
              </div>
              <div class="block-content">
                熟练掌握Linux常用操作命令及lamp、lnmp环境配置（使用yum/apt源安装及编译安装）
              </div>
              <div class="block-content">熟练掌握Linux-shell编程基本语法</div>
            </div>
            <div class="block">
              <div class="block-title">其他</div>
              <div class="block-content">熟练使用Git及SVN进行代码管理</div>
              <div class="block-content">熟练掌握设计模式及设计原则</div>
              <div class="block-content">了解C#基本语法，有winform窗体项目开发经验</div>
              <!-- <div class="block-content">了解java基本语法</div> -->
              <div class="block-content">了解python基本语法</div>
            </div>
          </div>
        </section>

        <!-- 经历 -->
        <section id="experience">
          <div class="section-title">项目经历</div>
          <div class="section-content">
            <!-- 魔翼科技（大连）有限公司 -->
            <div class="block">
              <div class="block-title">
                <span class="compony-name">魔翼科技（大连）有限公司</span>
                <span class="span-date">2020.6 - 至今</span>
                <span class="span-blocak">部门负责人、全栈开发</span>
              </div>
              <!-- <div class="block-subtitle">2020年6月 - 至今</div> -->
              <!-- <div class="project-title">项目一</div> -->
              <div class="project-content block-content marg">
                <div>
                  项目描述:公司主营业务是虚拟仿真实验APP。将线下在实验室中做的实验搬到手机APP中，我作为web开发部门的负责人，主要负责如下工作：
                </div>
                <div>
                  ● 前期维护公司旧有微信公众号网页，在其基础上开发新功能并解决旧有bug。
                </div>
                <div>
                  ●
                  优化数据库数据库表，将表中base64图片链接转换成在线链接，达到数据表瘦身的目的。将大数据量表按照年份进行分表操作，提升查询速度。
                </div>
                <div>
                  ● 分析大流量访问下数据库中的慢sql，进行添加、优化索引及分表等操作。
                </div>
                <div>
                  ●
                  基于公司旧有平台项目数据架构（初期要兼容旧有平台）重新搭建后端项目（基于laravel5.8），进行代码重构。
                </div>
                <div>
                  ●
                  编写通用加密解密方法，公司产品线（APP、网站、微信小程序、微信小游戏）与服务端进行数据交互，传递参数均以加密的形式进行。
                </div>
                <div>
                  ●
                  重新配置linux服务器环境，包括PHP、NGINX、PYTHON、JAVA。重新部署网站项目，包括基于PHP的laravel框架、基于PYTHON的django框架、基于JAVA的SpringBoot框架。
                </div>
                <div>
                  ●
                  搭建微信小程序基础架构。包括自定义组件的封装，微信请求的封装及自定义watch监听属性等。
                </div>
                <div>
                  ●
                  搭建学生管理系统网站前端架构（基于VUE2），包括自定义组件的封装、axios请求封装、env文件配置等。
                </div>
                <div>
                  ● 搭建文档系统，便于编写接口文档，开发中遇到的问题以及产品逻辑等。
                </div>
                <div>
                  ● 与领导沟通、分析客户及我们自身的需求，并将需求部署给部门员工。
                </div>
                <div>
                  ● 项目整体重构完成之后，将项目需求高性能模块接口使用SpringBoot框架重写。
                </div>
                <div>
                  ● SpringBoot框架中集成Sentinel限流工具，保证学生选课大流量访问的时候系统可以正常访问。
                </div>
              </div>
            </div>
            <!-- 大连智汇人和科技有限公司 -->
            <div class="block">
              <div class="block-title">
                <span class="compony-name">大连智汇人和科技有限公司</span>
                <span class="span-date">2020.3 - 2020.6</span>
                <span class="span-blocak">全栈开发</span>
              </div>
              <div class="block-content marg">
                <div>
                  项目描述：公司主要的业务是猎头招聘，产品主要有PC端网站（类似BOSS直聘），微信小程序及内部人员使用的数据管理系统，我的主要工作就是对目前现有的平台进行升级，同时对原有代码进行重构，采用前后分离模式开发，前端交互以及后端接口编写都由由我自己独立完成。
                </div>
                <div>使用YII2.0框架</div>
              </div>
            </div>
            <!-- 广州多浦乐电子科技股份有限公司 -->
            <div class="block">
              <div class="block-title">
                <span class="compony-name">广州多浦乐电子科技股份有限公司</span>
                <span class="span-date">2019.3 - 2020.3</span>
                <span class="span-blocak">全栈开发</span>
              </div>
              <div class="project-title">企业管理系统开发(类似禅道)</div>
              <div class="block-content marg">
                <div>
                  项目描述:公司内部自用管理系统(含财务系统)开发，功能均是根据企业自己的需求自定义(类似禅道)。
                </div>
                <div>
                  前端使用VUE2+elementui，后端使用thinkphp5。前后端均由我自己开发。
                </div>
              </div>
              <!-- <div class="project-title">数据管理系统</div>
              <div class="block-content marg">
                <div>
                  项目描述:这套系统是为中车北京分公司内部使用定制的数据管理系统，主要对数据库中的数据进行管理。
                </div>
                <div>需求：用户可以自定义数据库表，包括字段增删改。</div>
                <div>
                  用户的数据主要分为三级，要实现数据的树形结构的显示及拖拽（同等级互换，或者子变父、父变子）。
                </div>
                <div>用户自定义excel格式的数据导入数据库。</div>
              </div> -->
            </div>
            <!-- 大连汇海网络科技有限公司 -->
            <div class="block">
              <div class="block-title">
                <span class="compony-name">大连汇海网络科技有限公司</span>
                <span class="span-date">2018.8 - 2019.3</span>
                <span class="span-blocak">PHP、微信小程序开发</span>
              </div>
              <!-- <div class="project-title">一手团微信小程序（拼团）</div>
              <div class="block-content marg">
                项目描述：一手团小程序主要就是拼团购物，在小程序中可进行团长申请，成为团长之后，可以在商品库中选择商品，进行拼团购物，对应的商品会有对应的返利，团长可提现，配送及取货参照一手生鲜公众号商城的物联网系统。
              </div> -->
              <div class="project-title">一手生鲜公众号/小程序商城及APP开发及维护</div>
              <div class="block-content marg">
                <div>
                  项目描述：一手生鲜公众号商城采用物联网系统，一般使用流程为，用户在商城下单，由配送人员投放至指定的存储柜中（类似蜂巢快递柜），投放结束，云端通过订单信息给对应用户发送取货码，用户根据取货码到存货柜中拿取对应的物品（类似蜂巢取快递过程）商城采用前后端分离模式进行开发。Yii1.2框架
                </div>
              </div>
            </div>
            <!-- 大连领网科技有限公司 -->
            <div class="block">
              <div class="block-title">
                <span class="compony-name">大连领网科技有限公司</span>
                <span class="span-date">2017.3 - 2018.8</span>
                <span class="span-blocak">全栈开发</span>
              </div>
              <!-- <div class="project-title">
                建站猫企业站1.0/2.0开发及升级（类似凡科建站）
              </div>
              <div class="block-content marg">
                <div>
                  项目描述：建站猫企业站1.0版本开发末期我加入团队，2.0版本我全程参与开发，负责后端PHP开发及数据库搭建。
                </div>
                <div>
                  主要内容：修复建站猫之前开发过程中的bug。对用户反映的功能性问题，进行重新设计、重新编写,改变保存机制。用户完成网站的布局之后，通过一键保存按钮，将页面中内容保存至数据库。
                </div>
                <div>服务器端基于thinkphp3.2，前端使用html+jquery。</div>
              </div> -->
              <div class="project-title">建站猫—Vue商城（类似凡科建站）</div>
              <div class="block-content marg">
                <div>
                  项目描述：基于VUE2开发的项目，主要负责后端PHP开发，参与前端VUE开发
                </div>
                <div>
                  主要内容：这个项目是一个可以让用户DIY创建商城的建站平台，用户通过在平台上拖拽，点击，等简单的操作，完成自定义商城的建设。该项目属于pc，平板，手机，三合一建站，并且可以通过电脑一键生成小程序。
                </div>
                <div>服务器端基于thinkphp3.2，前端使用VUE2。</div>
              </div>
            </div>
          </div>
        </section>

        <!-- 教育经历 -->
        <section id="education">
          <div class="section-title">教育经历</div>
          <div class="section-content">
            <div class="block">
              <div class="block-title">国家开放大学</div>
              <div class="block-subtitle">2020.9 - 2023.1 | 计算机科学与技术</div>
            </div>
            <div class="block">
              <div class="block-title">辽宁建筑职业学院</div>
              <div class="block-subtitle">2014.9 - 2017.7 | 道路桥梁工程技术</div>
            </div>
          </div>
        </section>
        <!-- 社区经历 -->
        <section id="education">
          <div class="section-title">社区经历</div>
          <div class="section-content">
            <img src="https://resource.guanchao.site/resume/al.jpg" title="1686102670249333.png" alt="阿里云开发者社区" @click="imageBoost('https://resource.guanchao.site/resume/al.jpg')" class="cursor" style="height: 300px;">
            <img src="https://resource.guanchao.site/resume/al2.jpg" title="1686102670249333.png" alt="阿里云开发者社区" @click="imageBoost('https://resource.guanchao.site/resume/al2.jpg')" class="cursor" style="height: 200px;margin-left: 20px;">
            <img src="https://resource.guanchao.site/resume/jj.jpg" title="1686102670249333.png" alt="掘金启航计划" @click="imageBoost('https://resource.guanchao.site/resume/jj.jpg')" class="cursor" style="height: 200px;margin-left: 20px;">
          </div>
        </section>
        <div class="dow">
          <a href="https://resource.guanchao.site/resume/关超 全栈工程师－简历.doc"
            >点击下载word简历</a
          >
        </div>
      </div>
    </main>
    <!-- 抽屉组件 -->
    <drawer v-on:showMenuByChild="showMenuByChild"></drawer>
    <!-- 置顶和IM按钮 -->
    <TopIM />
    <!-- 网站底部组件 -->
    <footer>
      <div class="menu-copyright">
        <p style="text-align: center">
          Copyright© 2017 - 2023 |
          <a target="_blank" href="https://guanchao.site">时间里的</a>
          .AllRightsReserved
        </p>
      </div>
    </footer>
    <!-- 网页大图组件 -->
    <big-img v-if="showImg" v-on:closeBigImg="closeBigImg" :imgSrc="imgSrc"></big-img>
  </div>
</template>

<style lang="scss" scoped>
  @import "../../assets/css/pc/resume.scss";
</style>

<script lang="ts">
  // 引入js文件
  import resume from "/@/assets/js/pc/resume";
  // 使用js对象
  export default {
    ...resume,
  };
</script>
